<template>
  <div class="idear">
    <van-row>
      <van-col span="24">
        <van-nav-bar
          title="消息中心"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-col>
      <van-col span="24">
        <div class="left-box">
          <van-grid direction="horizontal" :column-num="1">
            <van-grid-item icon="service-o" text="在线客服" />
          </van-grid>
        </div>
        <div class="right-box">
          <span style="font-size: 14px"><van-badge :content="1" /></span>
          <van-icon name="arrow" />
        </div>
      </van-col>
      <van-col span="24">
        <div class="left-box">
          <van-grid direction="horizontal" :column-num="1">
            <van-grid-item icon="gift-o" text="活动消息" />
          </van-grid>
        </div>
        <div class="right-box">
          <span style="font-size: 14px"><van-badge :content="10" /></span>
          <van-icon name="arrow" />
        </div>
      </van-col>
      <van-col span="24">
        <div class="left-box">
          <van-grid direction="horizontal" :column-num="1">
            <van-grid-item icon="smile-o" text="服务消息" />
          </van-grid>
        </div>
        <div class="right-box">
          <span style="font-size: 14px"><van-badge :content="2" /></span>
          <van-icon name="arrow" />
        </div>
      </van-col>
      <van-col span="24">
        <div class="left-box">
          <van-grid direction="horizontal" :column-num="1">
            <van-grid-item icon="discount" text="系统消息" />
          </van-grid>
        </div>
        <div class="right-box">
          <span style="font-size: 14px"><van-badge :content="3" /></span>
          <van-icon name="arrow" />
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.left-box,
.right-box {
  color: #a2a2a2;
  cursor: pointer;
}
.left-box {
  float: left;
}
.right-box {
  float: right;
  padding-top: 16px;
  margin-right: 10px;
}
</style>